<template>
  <a-form
    ref="formRef"
    class="form"
    :model="filterData"
    layout="inline"
    v-if="!$route.params.tabStatus"
  >
    <a-form-item key="keyword" name="keyword">
      <a-input
        v-model:value.trim="filterData.keyword"
        placeholder="搜索用户名称"
      >
        <template #prefix> <search-outlined /> </template>
      </a-input>
    </a-form-item>
    <a-form-item v-for="item in filterForm" :key="item.key" :name="item.key">
      <component
        :is="compMap[item.type] || 'a-' + item.type"
        v-model:value.trim="filterData[item.key]"
        :placeholder="`${item.type === 'select' ? '请选择' : '请填写'}${
          item.label
        }`"
        :allowClear="true"
        v-bind="item.props"
      />
    </a-form-item>
  </a-form>
  <Table :tableProps="tableProps" @tableChange="handleTableChange">
    <template #action="{ record }">
      <a-button type="link" @click="handleReviewClick(record)">{{
        record.status === UserIdentifyStatusEnum.Wait ? "去审核" : "查看"
      }}</a-button>
    </template>
  </Table>
</template>
<script lang="ts" setup>
import { createVNode, getCurrentInstance, ref } from "vue";
import { userFilterForm, getUserTableColumns } from "../config";
import { approveUser, getUserList, rejectUser } from "@/api";
import { compMap } from "@/components/Form/config";
import Modal from "ant-design-vue/es/modal";
import Table from "@/components/Table.vue";
import { useTableData } from "@/hooks";
import UserDetailModal from "./UserDetailModal.vue";
import { UserIdentifyStatusEnum, userIdentifyStatusMap } from "@/utils";
import { useRoute } from "vue-router";
const formRef = ref();
const route = useRoute();
const filterData = ref<Record<string, any>>(
  route.params.tabStatus
    ? { status: userIdentifyStatusMap[UserIdentifyStatusEnum.Wait] }
    : {}
);
const filterForm = userFilterForm;
const { tableProps, handleTableChange, getData } = useTableData(
  getUserList,
  filterData
);
tableProps.columns = getUserTableColumns();
const appContext = getCurrentInstance()?.appContext;
const handleReviewClick = (record: Record<string, any>) => {
  Modal.confirm({
    icon: null,
    title: "用户详情",
    wrapClassName: `user-detail-modal${
      record.status === UserIdentifyStatusEnum.Wait ? " show-button" : ""
    }`,
    centered: true,
    maskClosable: record.status !== UserIdentifyStatusEnum.Wait,
    closable: record.status !== UserIdentifyStatusEnum.Wait,
    content: () => createVNode(UserDetailModal, { record }),
    okText: "评审通过",
    cancelText: "评审拒绝",
    width: 700,
    appContext,
    onOk() {
      if (record.status !== UserIdentifyStatusEnum.Wait) return true;
      return approveUser(record.id).then(() => getData());
    },
    onCancel() {
      if (record.status !== UserIdentifyStatusEnum.Wait) return true;
      return rejectUser(record.id).then(() => getData());
    },
  });
};
</script>
<style lang="scss">
.user-detail-modal {
  .ant-modal-confirm-btns {
    display: none;
  }
  &.show-button {
    .ant-modal-confirm-btns {
      display: block;
    }
  }
}
</style>
